<template>
	<div class="card" style="width: 18rem; margin: 20px;" v-for="book in page.list" :key="book.bookId">
		<img :src="imgPath + book.bookImg" class="card-img-top">
		<div class="card-body">
			<h5 class="card-title text-wrap text-truncate" style="height: 48px;">{{ book.bookName }}</h5>
			<p class="card-text text-wrap text-truncate" style="height: 24px;">{{ book.bookAuthor }}</p>
		</div>
		<ul class="list-group list-group-flush">
			<li class="list-group-item d-flex justify-content-between">
				<span class="user-select-none">库存:</span>
				<span style="width: 80%;" class="text-truncate">{{ book.bookQuantity }}</span>
			</li>
			<li class="list-group-item d-flex justify-content-between">
				<span class="user-select-none">ISBN:</span>
				<span style="width: 80%;" class="text-truncate">{{ book.bookIsbn }}</span>
			</li>
		</ul>
		<div class="card-body">
			<a type="button" class="btn btn-outline-info card-link" @click="showInfo(book.bookId)">查看详情</a>
			<a type="button" class="btn btn-outline-primary card-link" @click="borrowBook(book.bookId, $event)"
				v-if="book.bookQuantity > 0">借阅</a>
			<a type="button" class="btn btn-danger disabled card-link" v-else>借阅</a>
		</div>
	</div>
</template>

<script>
	import {
		computed,
		reactive,
		toRefs,
		onMounted
	} from "vue";
	import {
		useRouter
	} from "vue-router";
	import {
		useStore,
	} from "vuex";
	import axios from "axios";
	
	export default {
		props: {
			//入口参数
		},
		components: {
			//引入组件
		},
		setup() {
			//实例化userouter
			const router = useRouter();
			const store = useStore();
			const data = reactive({
				books: [],
				bookClazzs: [],
				page: {
					endRow: 0,
					hasNextPage: false,
					hasPreviousPage: false,
					isFirstPage: false,
					isLastPage: false,
					list: [],
					navigateFirstPage: 0,
					navigateLastPage: 0,
					navigatePages: 0,
					navigatepageNums: [],
					nextPage: 0,
					pageNum: 0,
					pageSize: 0,
					pages: 0,
					prePage: 0,
					size: 0,
					startRow: 0,
					total: 0
				},
				searchBook: {
					bookClassificationId: -1,
					bookName: '',
					bookIsbn: ''
				},
				imgPath: store.state.imageUrl,
				showInfo: (bookId) => {
					router.push({
						name: 'Book',
						query: {
							id: bookId,
						}
					})
				},
				borrowBook: (bookId, event) => {
					event.stopPropagation();
					alert("借书" + bookId);
				},
	
	
	
				/////////////////////////////////////////////////////////////////////////
			});
			return {
				...toRefs(data),
			};
		},
	};
</script>

<style>
	
</style>
